<template>
	<view class="listBox">
		<view v-if="userInfo.role == '150'">
			<view class="edit_but" v-if="!isEdit" @click="editClick()">编辑</view>
			<view class="operationBox" v-else>
				<view class="btn noteBtn" @click="subForm()">保存</view>
				<view class="btn ynteBth" @click="isEdit = false">取消</view>
			</view>
		</view>
		<view class="infoTitleBox">
			<view class="info_title">客户信息</view>
		</view> 
		<view class="infoListBox">
			<view class="infoLi">
				<view class="infoLable">客户名称</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.customerName}}</view>
				<view class="infoVal" v-else>
					<input class="uni-input" v-model="editForm.customerName" placeholder="请输入客户名称" placeholder-style="color:#3B86FF" />
					</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">手机号码</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.mobile}}</view>
				<view class="infoVal" v-else>
					<input class="uni-input" type="number" maxlength="11" v-model="editForm.mobile" placeholder="请输入客户手机号"
					 placeholder-style="color:#3B86FF" />
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">固定电话</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.telephone}}</view>
				<view class="infoVal" v-else>
					<input class="uni-input" type="text" v-model="editForm.telephone" maxlength="13" placeholder="请输入客户固定电话" placeholder-style="color:#3B86FF" />
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">性别</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.sex}}</view>
				<view class="infoVal" @click="bindSexChange" v-else>
					<view class="uni-input">{{ editForm.customerSex || '请输入客户性别' }}</view>
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">所在区域</view>
				<view class="infoVal" v-if="!isEdit">
					<text v-if="clueInfo.province">{{clueInfo.province}}/</text>
					<text v-if="clueInfo.city">{{clueInfo.city}}</text>
					<text v-if="clueInfo.area">/{{clueInfo.area}}</text>
				</view>
				<view class="infoVal" v-else>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="uni-input">{{ editForm.address ? editForm.address : '请选择所在区域'}}</view>
					</pick-regions>
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">客户属性</view>
				<view class="infoVal">潜客</view>
			</view>

			<view class="infoTitleBox">
				<view class="info_title">线索信息</view>
			</view>

			<view class="infoLi">
				<view class="infoLable">线索ID</view>
				<view class="infoVal">{{clueInfo.uniqueId}}</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">意向级别</view>
				<view class="infoVal">{{clueInfo.intentionLevel}}</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">销售顾问</view>
				<view class="infoVal">{{clueInfo.salesmanName}}</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">购车用途</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.purchasePurpose}}</view>
				<view class="infoVal" v-else>
					<picker @change="bindPickerChange($event, '1')" :value="editForm.carBuyingPurpose" :range="purposeArray">
						<view class="uni-input">{{editForm.carBuyingPurpose || '请选择购车用途'}}</view>
						<!-- <view class="uni-input">{{clueInfo.purchasePurpose || '请选择购车用途'}}</view> -->
					</picker>
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">购车类型</view>
				<view class="infoVal" v-if="!isEdit">{{clueInfo.purchaseType}}</view>
				<view class="infoVal" v-else>
					<picker @change="bindPickerChange($event, '2')" :value="editForm.carBuyingType" :range="typeArray">
						<view class="uni-input">{{editForm.carBuyingType || '请选择购车类型'}}</view>
						<!-- <view class="uni-input">{{clueInfo.purchaseType || '请选择购车类型'}}</view> -->
					</picker>
				</view>
			</view>
			<view class="infoLi">
				<view class="infoLable">购车关注点</view>
				<view class="infoVal"></view>
			</view>
			<view class="infoLi_remarks">
				<view class="infoLable">备注</view>
				<view class="infoVal">{{clueInfo.remarks}}</view>
			</view>

			<view class="infoTitleBox">
				<view class="info_title">意向信息</view>
			</view>
			<block v-for="(item,idx) in intentionList" :key="item.lable">
				<view class="infoLi">
					<view class="infoLable">{{ item.lable }}</view>
					<view class="infoVal">{{ item.val | getVal(clueInfo) }}</view>
				</view>
			</block>

			<view class="infoTitleBox">
				<view class="info_title">管理信息</view>
			</view>
			<block v-for="(item,idx) in manageList" :key="item.lable">
				<view class="infoLi">
					<view class="infoLable">{{ item.lable }}</view>
					<view class="infoVal">{{ item.val | getVal(clueInfo) }}</view>
				</view>
			</block>
			<view class="infoTitleBox">
				<view class="info_title">战败信息</view>
			</view>
			<block v-for="(item,idx) in defeatList" :key="item.lable">
				<view class="infoLi">
					<view class="infoLable">{{ item.lable }}</view>
					<view class="infoVal">{{ item.val | getVal(clueInfo)}}</view>
				</view>
			</block>
			<view class="infoTitleBox">
				<view class="info_title">归集历史</view>
			</view>
			
			<view class="table_box">
				<view class="table">
					<view class="table-th table-tr">
						<view class="table-td">意向车型</view>
						<view class="table-td">来源渠道</view>
						<view class="table-td">活动名称</view>
						<view class="table-td">创建时间</view>
					</view>
				
					<block v-for="(item,idx) in originals" :key="idx">
						<view class="table-tr">
								<view class="table-td" v-if="item.intentCarBrand && item.intentCarModel && item.intentCarStyle">{{item.intentCarModel+'/'+item.intentCarStyle}}</view>
								<view class="table-td" v-else-if="item.intentCarBrand && item.intentCarModel">{{item.intentCarBrand+'/'+item.intentCarModel}}</view>
								<view class="table-td" v-else-if="item.intentCarStyle">{{item.intentCarStyle}}</view>
								<view class="table-td" v-else></view>
							
							<!-- <view class="table-td">{{item.intentCarBrand && item.intentCarModel ? item.intentCarBrand+'/'+item.intentCarModel:''}}</view> -->
							
							<view class="table-td">{{item.firstChannelName && item.secondChannelName?item.firstChannelName+'/'+item.secondChannelName:''}}</view>
							<view class="table-td">{{ item.activityName || ''}}</view>
							<view class="table-td">{{ item.createTime | dataFormat}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	import {
		getClueDetail,
		salesmanEdit,
		getOriginalPage
	} from '@/service/api/api.js';
	import {
		parseTime,
		checkPhone,
		checkTel
	} from '@/common/util.js';
	export default {
		props: {
			clueId: {
				type: String,
				default: ''
			}
		},
		components: {
			pickRegions
		},
		filters: {
			dataFormat(val) {
				//return parseTime(val, '{y}-{m}-{d} {h}:{i}')
				return parseTime(val, '{y}-{m}-{d}')
			},
			getVal(val, clueInfo) {
				let isEmpty = (data) => (JSON.stringify(data) === '{}') ? true : false

				if (!isEmpty(clueInfo) && val) {
					// return clueInfo[val] || clueInfo.clean[val] || ''
					return clueInfo[val] 
				} else {
					return ''
				}
			}
		},
		data() {
			return {
				userInfo: {},
				isEdit: false,
				clueInfo: {},
				editForm: {
					customerName: '',
					mobile: '',
					telephone: '',
					customerSex: '',
					sex: '', //male(男)、female(女)
					address: '',
					province: '',
					city: '',
					area: '',
					carBuyingPurpose: '',
					carBuyingPurposeCode: '',
					carBuyingType: '',
					carBuyingTypeCode:''
				},
				region: [],
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '440113',
				purposeIndex: '0',
				sexArray: ['男', '女'],
				purposeArray: ['商务', '家用', '家商兼用', '出租运营', '驾校', '接待用车', '领导用车', '业务用车'],
				typeIndex: '0',
				typeArray: ['新购', '本品增购', '他品增购', '本品换购', '他品换购'],
				intentionList: [{
					lable: '意向车系',
					val: 'intentCarModel'
				}, {
					lable: '意向车型',
					val: 'intentCarStyle'
				}, 
				// {
				// 	lable: '配置',
				// 	val: ''
				// }, {
				// 	lable: '动力',
				// 	val: ''
				// }, {
				// 	lable: '外观颜色',
				// 	val: ''
				// }, {
				// 	lable: '内饰颜色',
				// 	val: ''
				// }, 
				{
					lable: '购车预算（万）',
					val: ''
				}, {
					lable: '竞品车型',
					val: 'compCar'
				}, {
					lable: '购买数量',
					val: ''
				}, {
					lable: '预计成交时间',
					val: 'estTranDay'
				}],
				manageList: [{
					lable: '派发时间',
					val: 'distributeTime'
				}, {
					lable: '分配时间',
					val: 'assignTime'
				}, {
					lable: '清洗状态',
					val: 'cleanStatus'
				}, {
					lable: '清洗结果',
					val: 'cleanResultStr'
				}, {
					lable: '一级渠道',
					val: 'firstChannelName'
				}, {
					lable: '二级渠道',
					val: 'secondChannelName'
				}, {
					lable: '活动名称',
					val: 'activityName'
				}, {
					lable: '创建时间',
					val: 'createTime'
				}],
				defeatList: [{
					lable: '战败时间',
					val: 'defeatTime'
				}, {
					lable: '战败原因',
					val: 'defeatReason'
				}, {
					lable: '战败审批状态',
					val: ''
				}],
				originals: []
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		created() {
			this.init()
			
		},
		methods: {
			init() {
				this.userInfo = uni.getStorageSync('user_info')
				this.reqClueDetail()
			},

			reqClueDetail() {
				getClueDetail({
					id: this.clueId
				}).then(res => {
					if (res.data.code == 0) {
						let resData = res.data.data
						resData.defeatTime = resData.clean ? parseTime(resData.defeatTime) : ''
						resData.defeatReason = resData.clean ? resData.defeatReason : ''
						resData.distributeTime = parseTime(resData.distributeTime)
						
						
						if (resData.clean) {
							resData.clean.compCar = resData.clean.compCarModel && resData.clean.compCarStyle ?
								`${resData.clean.compCarModel}/${resData.clean.compCarStyle}` : ''
							resData.clean.assignTime = parseTime(resData.clean.assignTime)
							resData.clean.distributeTime = parseTime(resData.clean.distributeTime)
							resData.clean.createTime = parseTime(resData.clean.createTime)
							resData.clean.cleanResultStr = resData.clean.cleanResult != null ? (resData.clean.cleanResult ? '有效' : '无效') : ''
							resData.cleanResultStr = resData.clean.cleanResult != null ? (resData.clean.cleanResult ? '有效' : '无效') : ''
							resData.defeatTime = resData.clean.cleanResultStr == '无效' ? parseTime(resData.updateTime): ''
							resData.defeatReason = resData.clean.cleanResultStr == '无效' ?
								`${resData.clean.invalidMajorReason}/${resData.clean.invalidMinorReason}` : ''
						}
				// carBuyingPurpose: '',
				// carBuyingPurposeCode: '',
				// carBuyingType: '',
				// carBuyingTypeCode:''
						
						this.editForm.carBuyingPurpose=resData.purchasePurpose
						this.editForm.carBuyingType=resData.purchaseType

						resData.createTime = parseTime(resData.createTime)
						resData.assignTime = parseTime(resData.assignTime)
						resData.updateTime = parseTime(resData.updateTime)
						// console.log(res.data.data)
						this.clueInfo = res.data.data
						this.getOriginals(res.data.data.uniqueId)
					}
				})
			},
			getOriginals(uniqueId) {
				getOriginalPage({
					pageNum: 1,
					pageSize: 9999,
					userId: this.userInfo.userId,
					uniqueId: uniqueId
				}).then(res => {
					if (res.data.code == 0) {
						this.originals = res.data.data.content || []
					}
				})
			},
			editClick() {
				this.isEdit = true
				this.editForm = {
					customerName: this.clueInfo.customerName,
					mobile: this.clueInfo.mobile,
					telephone: this.clueInfo.telephone || '',
					customerSex: this.clueInfo.sex || '',
					sex: this.clueInfo.sex == '男' ? 'male' : 'female',
					address: `${this.clueInfo.province}/${this.clueInfo.city}/${this.clueInfo.area}`,
					province: this.clueInfo.province,
					city: this.clueInfo.city,
					area: this.clueInfo.area,
					carBuyingPurpose: '',
					carBuyingType: '',
					carBuyingPurposeCode: '',
					carBuyingTypeCode:''
				}
			},
			bindPickerChange(e, flag) {
				let idx = e.detail.value
				if (flag == '1') {
					var carBuyingPurpose=''
					switch (idx){
						case 0:
							carBuyingPurpose='business'
							break;
						case 1:
							carBuyingPurpose='home'
							break;
						case 2:
							carBuyingPurpose='home_bus'
							break;
						case 3:
							carBuyingPurpose='taxi'
							break;
						case 4:
							carBuyingPurpose='school'
							break;
						case 5:
							carBuyingPurpose='reception'
							break;
						case 6:
							carBuyingPurpose='leader'
							break;
						case 7:
							carBuyingPurpose='work'
							break;
					}
					console.log(carBuyingPurpose,"idxidx")
					
					this.editForm.carBuyingPurpose = this.purposeArray[idx]
					this.editForm.carBuyingPurposeCode = carBuyingPurpose
				} else if (flag == '2') {
					
					var carBuyingType=''
					switch (idx){
						case 0:
							carBuyingType='new'
							break;
						case 1:
							carBuyingType='add_this'
							break;
						case 2:
							carBuyingType='add_other'
							break;
						case 3:
							carBuyingType='redeem_this'
							break;
						case 4:
							carBuyingType='redeem_other'
							break;
					}
					this.editForm.carBuyingType = this.typeArray[idx]
					this.editForm.carBuyingTypeCode = carBuyingType
				}
			},
			// 获取选择的地区
			handleGetRegion(region) {
				// console.log(region)
				this.editForm.address = `${region[0].name}/${region[1].name}/${region[2].name}`
				this.editForm.province = region[0].name
				this.editForm.city = region[1].name
				this.editForm.area = region[2].name
			},

			bindSexChange() {
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: (e) => {
						this.editForm.customerSex = e.tapIndex == '0' ? '男' : '女'
						this.editForm.sex = e.tapIndex == '0' ? 'male' : 'female'
					}
				})
			},

			subForm() {
				try {
					Object.keys(this.editForm).forEach((key, idx) => {
						// if (!this.editForm[key] && key != 'carBuyingPurpose' && key != 'carBuyingType') {
						// 	throw new Error('请输入完整信息')
						// }
						if (key == 'mobile' && !checkPhone(this.editForm[key])) {
							throw new Error('请输入正确的手机号')
						}
						if(this.editForm['mobile']==''){
							// if (key == 'telephone' && !checkTel(this.editForm[key])) {
							if (key == 'telephone') {
								throw new Error('请输入正确的固定电话')
							}
						}
					})
				} catch (e) {
					uni.showToast({
						title: e.message,
						icon: 'none',
					})

					return false
				}

				let data = {
					...this.editForm,
					id: this.clueId,
					purchasePurpose :this.editForm.carBuyingPurposeCode,
					purchaseType :this.editForm.carBuyingTypeCode,
					userId: uni.getStorageSync('user_info').userId || '',
					deptId:uni.getStorageSync('user_info').userDeptId || '',
					dealerId: uni.getStorageSync('user_info').dealerId || '',
				}

				// console.log(data)

				salesmanEdit(data).then(res => {
					if (res.data.code == '0') {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.isEdit = false
						this.reqClueDetail()
						const pages = getCurrentPages() // 获取当前页面栈数组，第一个元素为首页，最后一个元素为当前页面  
						let page = pages[pages.length - 2] // 要返回到的页面，超过页面栈，则为首页 
						page.$vm._data.ifOnShow = true
					} else {
						uni.showToast({
							title: res.data.errMsg,
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.listBox {
		width: 100%;
		padding-bottom: 80rpx;
		position: relative;
			.edit_but {
				width: 100%;
				height: 80rpx;
				position: fixed;
				bottom: 0;
				margin: auto;
				text-align: center;
				line-height: 80rpx;
				background: #3B86FF;
				border: 2rpx solid #3B86FF;
				opacity: 1;
				color: #FFFFFF;
				font-size: 32rpx;
				z-index: 66;
			}

			.operationBox {
				flex: 1;
				position: fixed;
				bottom: 0;
				z-index: 66;
				width: 100%;
				margin-left: auto;
				display: flex;
				display: -webkit-flex;
				display: inline-flex;
				flex-direction: row-reverse;

				.btn {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 20rpx;
					color: #3B86FF;
					box-sizing: border-box;
					// float: right;
				}
				.ynteBth{
					background: #FFFFFF;
					color: #3B86FF;
				}
				.noteBtn {
					background: #3B86FF;
					color: #FFFFFF;
				}
			}
		
		.infoTitleBox {
			width: 100%;
			height: 80rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f5f6fa;
			font-size: 26rpx;
			color: #43425D;
			
			.info_title{
				font-size: 32rpx;
				font-weight: bold;
			}	
		}
		.infoListBox {
			width: 100%;

			.infoLi {
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				display: -webkit-flex;
				display: inline-flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				font-size: 32rpx;
				color: #43425D;
				background-color: #FFFFFF;

				.infoLable {
					width: 200rpx;
				}

				.infoVal {
					flex: 1;
					text-align: right;
					font-size: 30rpx;
					color: #A5A4BF;

					.uni-input {
						font-size: 30rpx;
						color: #3B86FF;
					}
				}
			}

			.infoLi_remarks {
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #43425D;
				background-color: #FFFFFF;

				.infoLable {
					line-height: 90rpx;
				}

				.infoVal {
					padding-bottom: 28rpx;
					font-size: 30rpx;
					color: #A5A4BF;
				}
			}

			.table_box {
				width: 100%;
				overflow: auto;
			}

			.table {
				display: table;
				width: 150%;
				border-collapse: collapse;
				box-sizing: border-box;
				border-bottom: 14rpx solid #f5f6fa;
				background-color: #FFFFFF;

				.table-tr {
					display: table-row;
					height: 90rpx;

					.table-td {
						display: table-cell;
						// width: 33.3%;
						width:161rpx;
						padding: 0 26rpx;
						border-top: 1rpx solid #F5F6FA;
						text-align: left;
						vertical-align: middle;
						font-size: 28rpx;
						color: #43425D;
					}
				}

				.table-th {
					.table-td {
						//font-size: 32rpx !important;
						//color: #43425D !important;
						font-weight: 600;
					}
				}
			}
		}
	}
</style>
